import React from 'react';
import styles from './style.css'
import {getHistory, getWidth, getWindowWidth} from "../../util/uitls";
import pageRedux from '../pageRedux'
import MyIconImage from "../../component/MyIconImage";
import MyModal from "../../component/MyModal";
import SettingModalContent from "./settingModalContent";

export class FriendList extends React.Component {
    constructor(props) {
        super()
        this.state = {
            setting_visiable: false
        }
    }

    componentDidMount() {

    }


    render() {
        var self = this
        return <div title="通讯录">
            <header className={styles.header}>
                <div className={styles.left}>
                    <MyIconImage image={"http://pj5qx5lsj.bkt.clouddn.com/Left.png"}></MyIconImage>
                </div>
                <div className={styles.center}>
                    通讯录
                </div>
                <div className={styles.right}>
                    <MyIconImage
                        onClick={() => {
                            this.setState({setting_visiable: true})
                        }}
                        image={"http://pj5qx5lsj.bkt.clouddn.com/%E8%AE%BE%E7%BD%AE.png"}></MyIconImage>
                    <MyModal visible={this.state.setting_visiable}
                             onClose={() => {
                                 this.setState({setting_visiable: false})
                             }}
                             bodyStyle={{
                                 bottom: null,
                                 top: 0,
                                 left: ((getWindowWidth() - 750) / 2) + "px",
                                 width: "750px"
                             }}
                    >
                        <SettingModalContent />
                    </MyModal>
                </div>
            </header>
            <section className={styles.body}>

            </section>
        </div>
    }
}


export default pageRedux(FriendList)